<template>
    <m-drawer :footer="false" width="60%" ref="drawerRef" title="成员管理">
        <m-table :beforeFetch="handleBeforeFetch" ref="tableRef" :api="userListByRoleId" :columns="columns" :actions="tableActions">
          <template #tableToolbarLeft>
            <a-button type="primary" @click="handleOpenSelectUserRole">
              <template #icon><PlusOutlined /></template>
              添加成员
            </a-button>
          </template>
        </m-table>
        <SelectUserRole ref="selectUserRoleRef" />
    </m-drawer>
  </template>
  <script setup lang="ts">
  import { ref } from 'vue';
  import { userListByRoleId, removeUserRole } from '/@/api/sys/role'
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import SelectUserRole from './selectUserRole.vue';
  const drawerRef = ref();
  const currentRecord = ref()
  const tableRef = ref();
  const selectUserRoleRef = ref();
  const columns = ref([{
      title: '用户名',
      dataIndex: 'userName',
      key: 'userName',
    }, {
      title: '姓名',
      dataIndex: 'realName',
      key: 'realName',
  }, {
      title: '手机号',
      dataIndex: 'mobilePhone',
      key: 'mobilePhone',
  }])
  const tableActions = ref([{
      label: '删除成员',
      icon: 'DeleteOutlined',
      divider: true,
      perms: 'sys:rbac:removeUserRole',
      orderNo: 90,
      popConfirm: {
      title: '是否删除该条记录?',
      confirm(e: any, row: any) {
        removeUserRole([{
          userId: row.record.id,
          roleId: currentRecord.value.id
        }]).then(()=>{
        message.success(`删除成功`)
        // 刷新列表
        tableRef?.value.reload()
      })
      },
      cancel() {
        message.info(`取消删除`)
      }
    }
    },])
  const handleBeforeFetch = (params: any)=>{
    return {
      ...params,
      roleId: currentRecord.value?.id
    }
  }
  const handleOpenSelectUserRole = () =>{
    selectUserRoleRef.value?.show(currentRecord.value)
  }
  defineExpose({
    show(record: any) {
      currentRecord.value = record
      drawerRef.value.openDrawer()
    }
  })
  </script>
  <style lang="less" scoped>
  
  </style>